<!-- 文件预览弹窗 -->
<template>
  <el-dialog
    v-model="dialogFormVisible"
    title="预览"
    width="60%"
    draggable
    overflow
    @close="handleClose"
  >
    <iframe
      :src="previewUrl"
      width="100%"
      style="min-height: 500px"
      frameborder="0"
    />
  </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from "vue";
import { ElDialog, ElMessage } from "element-plus";
import { getDict } from "@/api/utils";
// 弹窗关闭/打开事件
const props = defineProps({
  visible: Boolean,
  fileId: String,
  fileType: String,
  fileUrl: String,
  contractId: String
});
const dialogFormVisible = ref(false);
watch(
  () => props.visible,
  val => {
    dialogFormVisible.value = val;
  },
  { immediate: true }
);
const emit = defineEmits(["close"]);
function handleClose() {
  emit("close", false);
}
// 获取积木报表字典值
let jmreportUrlMap = {};
async function getReportUrlDict() {
  let params: ApiParams = {};
  params.key = "jmreport_url";
  try {
    const response: ApiResponse = await getDict(params);
    if (response.code === 200) {
      jmreportUrlMap = response.data;
    }
  } catch (error) {}
}
// 拼接URL
let previewUrl = ref("");
// 打开时加载
watch(dialogFormVisible, async newValue => {
  if (newValue) {
    await getReportUrlDict(); // 等待异步操作完成
    if (props.fileUrl && props.fileUrl != "") {
      previewUrl.value = props.fileUrl;
    } else {
      // 开发时调用
      const originUrl = "http://47.93.186.183:8085/";
      // 部署时调用
      // const originUrl =
      //   // window.location.protocol + "//" + window.location.hostname + ":8085/";
      //   "http://ycerp-jimureport-server.hibuilding.cn/";
      const previewIdQuery =
        "?id=" + props.fileId + "&contract_id=" + props.contractId;
      if (jmreportUrlMap[props.fileType] == undefined) {
        ElMessage.error("未找到对应的积木报表URL");
      }
      previewUrl.value =
        originUrl + jmreportUrlMap[props.fileType] + previewIdQuery;
    }
  }
});
</script>

<style lang="scss" scoped></style>
